import React, { Component } from 'react'
import { Table, Button, Space, Modal, Input, message } from 'antd';

// 表头
const columns = [
    {
        // 标题
        title: '名称',
        // 控制列表展示属性
        dataIndex: 'name',
        // 唯一值
        key: 'name',
        // 渲染的内容
        render: text => <a>{text}</a>
    },
    {
        title: '缩写名',
        dataIndex: 'short',
        key: 'short',
    },
    {
        title: '文章数',
        dataIndex: 'num',
        key: 'num',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <Button type="primary">编辑</Button>
                <Button danger type="primary">删除</Button>
            </Space>
        ),
    }
];

export default class Ant extends Component {
    state = {
        visible: false,
        form: {
            name: "",
            short: "",
            num: null
        },
        // 列表
        data: [
            {
                key: '1',
                name: '前端',
                short: 'frontEnd',
                num: 2
            },
            {
                key: '2',
                name: '后端',
                short: 'backEnd',
                num: 3
            },
            {
                key: '3',
                name: '开发工具',
                short: 'tool',
                num: 10
            }
        ]
    }
    // 显示添加弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    // 点击添加弹框Ok
    handleOk = e => {
        // 给数据添加唯一值
        this.state.form.key = Date.now()
        let data = [...this.state.data]
        data.push(this.state.form)

        this.setState({
            visible: false,
            data
        }, () => {
            message.success('添加成功');
        })
    }

    // 点击添加弹框取消
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }

    render() {
        const { form, data } = this.state
        const { name, short, num } = form
        return (
            <div>
                {/* 添加数据 */}
                <Button type="primary" onClick={this.showModal}>
                    添加
                </Button>
                <Modal
                    title="添加数据"
                    // 控制弹框显示隐藏
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定"
                    cancelText="取消"
                >
                    <p className="flex">
                        <span>
                            名称：
                        </span>
                        <Input value={name} onChange={(ev) => {
                            this.state.form.name = ev.target.value
                            this.setState({})
                        }} />
                    </p>
                    <p className="flex">
                        <span>
                            缩写：
                        </span>
                        <Input value={short} onChange={(ev) => {
                            this.state.form.short = ev.target.value
                            this.setState({})
                        }} />
                    </p>
                    <p className="flex">
                        <span>
                            数量：
                        </span>
                        <Input value={num} onChange={(ev) => {
                            this.state.form.num = ev.target.value
                            this.setState({})
                        }} />
                    </p>
                </Modal>

                {/* 列表 */}
                <Table columns={columns} dataSource={data} />
            </div>
        )
    }
}
